<template>
	<view :style="{ '--color': vuex_config.themeColor1, '--price': vuex_config.price }">
		<view class="prod_item" v-for="(item, index) in dataList" :key="index" @click="goProDetail(item)">
			<view class="img_box" :style="item.templateInfo ? 'height:' + item.templateInfo.imgH + 'px' : ''">
				<!-- 检测高度用 -->
				<image v-if="type" mode="widthFix" :src="item.logo" @load="imgLoad($event, item, index)" @error="imgError($event, item, index)"></image>
				<!-- 正式显示 -->
				<template v-else>
					<u-lazy-load :image="item.templateInfo.errImg || item.logo"></u-lazy-load>
					<no-stock v-if="item.stock <= 0"></no-stock>
				</template>
			</view>
			<view class="cont_main" :id="'data-' + index">
				<view class="prod_name u-line-2">{{ item.name }}</view>
				<view class="prod_title u-line-2" v-if="vuex_config.subtitle == 1 && item.title">{{ item.title }}</view>
				<view class="details-location-classification" v-if="item.superiority">
					<view class="classification-box label_border" v-for="(tagItem, tagIndex) in item.superiority.split(',')" :key="tagIndex">{{ tagItem }}</view>
				</view>
				<view class="bot_box">
					<view class="box_price">
						<view class="new_price">
							<text class="price_icon">￥</text>
							<text class="new_num1">{{ (item.r_price || item.r_price === 0? item.r_price : item.price) | priceFmt() }}</text>
							<text class="new_num2">{{ (item.r_price || item.r_price === 0? item.r_price : item.price) | priceFmt(true) }}</text>
						</view>
						<text class="old_num" v-if="item.market_price && item.market_price > 0">￥{{ item.market_price }}</text>
					</view>
					<u-icon @click.stop="$showSpec(item, index)" width="44" height="44" :name="parameter.icon || 'shopping-cart'" class="icon_cart"></u-icon>
					<!-- <u-icon name="shopping-cart" class="icon_cart"></u-icon> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { templateMixin } from './templateMixin.js';
import noStock from '@/components/noStock.vue';
export default {
	mixins: [templateMixin],
	props: {
		parameter: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	data() {
		return {};
	},
	components: {
		'no-stock': noStock
	},
	methods: {
		goProDetail(item) {
			this.$toProd({ prodType: 1, pk_id: item.pk_id });
		},
		// 打开规格弹框
		$showSpec(item) {
			this.$emit('goAddCart', item.pk_id);
		}
	},
	filters: {
		// isPoint 是否取小数点后的数字
		priceFmt(price, isPoint = false) {
			let [priceInt, pricePoint] = (price + '').split('.');
			return isPoint ? (pricePoint ? '.' + pricePoint : '') : priceInt;
		}
	}
};
</script>

<style scoped lang="scss">
.prod_img {
	position: relative;
}
.prod_item {
	margin-bottom: 22rpx;
	border-radius: 16rpx;
	overflow: hidden;
	background: #fff;
	.img_box {
		position: relative;
		overflow: hidden;
	}
}
.cont_main {
	background: #fff;
	padding: 0 16rpx;
	.prod_name {
		margin-top: 14rpx;
		font-size: 28rpx;
		font-weight: bold;
		line-height: 36rpx;
	}
	.prod_title {
		font-size: 24rpx;
		color: #999;
		margin-top: 4rpx;
		line-height: 32rpx;
	}
	.details-location-classification {
		display: flex;
		flex-wrap: wrap;
		overflow: hidden;
		height: 40rpx;
		margin-top: 12rpx;
		.classification-box {
			padding: 0 10rpx;
			line-height: 38rpx;
			color: var(--color);
			font-size: 22rpx;
			margin: 1rpx 8rpx;
			border-radius: 6rpx;
			position: relative;
			white-space: nowrap;
			text-overflow: ellipsis;
			&.label_border::after {
				border-radius: 14rpx;
			}
		}
	}
	.bot_box {
		display: flex;
		align-items: center;
		margin-top: 18rpx;
		padding-bottom: 20rpx;
		.box_price {
			flex: 1;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			.new_price {
				display: inline-block;
				color: var(--price);
				font-weight: bold;
				.price_icon {
					font-size: 24rpx;
				}
				.new_num1 {
					font-size: 34rpx;
					font-weight: bold;
				}
				.new_num2 {
					font-size: 24rpx;
					margin-right: 10rpx;
				}
			}
			.old_num {
				display: inline-block;
				text-decoration: line-through;
				font-size: 24rpx;
				color: #888;
			}
		}
		.icon_cart {
			font-size: 44rpx;
			color: var(--color);
		}
	}
}
</style>
